<template>
  <view :class="[variables.ns.b, variables.ns.s('disabled', disabled), variables.ns.s('active', modelValue)]"
    @click="change">
    <Button :="buttonProps" :class="[variables.ns.e('change')]" :disabled="disabled">
      <view :class="[variables.ns.e('change-icons')]">
        <Font v-for="_ in 3" :class="[variables.ns.e('change-icon')]" icon="icon-select" />
      </view>
    </Button>
    <view :class="[variables.ns.e('content')]">
      <slot></slot>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { CheckboxNS, variables } from '.'
import Button from '@/components/button/index.vue'
import Font from '@/components/font/index.vue'

defineOptions({
  name: CheckboxNS.name
})
const props = defineProps(CheckboxNS.props)
const emits = defineEmits(CheckboxNS.emits)

function change() {
  if (props.disabled) return
  
  const val = !props.modelValue
  emits('update:modelValue', val)
  emits('change', val)
}
</script>